<template>
  <view class="user">
    <view class="" v-if="showBox">
      <view class="top" @click="spend">
				<image class="ico" src="/static/user/bg.png" mode=""></image>
        <view class="content">
          <view class="left">
            <image src="/static/user/avatar.png" mode=""></image>
          </view>
          <view class="right">
            <view class="right-top">
              {{ shopName }}
            </view>
            <view class="right-bottom">
              手机号: {{ phone }}
            </view>
          </view>
        </view>
      </view>
      <view class="buttom">
        <view class="buttom-list">
          <view
          class="list-list"
          v-for="(item, i) in aboutList"
          :key="i"
          @click="popup(item)"
          >
            <view class="list-left">
              <view class="left-img">
                <image :src="item.icon" mode=""></image>
              </view>
              <view class="list-center">
                <view class="center-top">
                  <text class="top-title">{{ item.title }}</text>
                  <!-- <text class="top-English">{{ item.english }}</text> -->
                </view>
                <view class="center-buttom">
                  <text>{{ item.contact }}</text>
                </view>
              </view>
            </view>
            <view class="list-right">
              <text v-if="item.money>=0" class="money">¥ {{ item.money }}</text>
              <image v-else src="/static/about/aeeow.png" mode="aspectFit"></image>
            </view>
          </view>
        </view>
      </view>
    </view>
    <tabBar :currentPage="'tabBar5'"></tabBar>
  </view>
</template>

<script>
import tabBar from '@/components/tabBar.vue'

export default {
  components: {
    tabBar
  },
  data() {
    return {
      shopName: '修改店铺名称',
      phone: '',
      showBox: false,
      aboutList: []
    }
  },
  onShow() {
    if (!uni.getStorageSync('userInfo').token) {
      uni.showModal({
        title: '提示',
        content: '未登录或登录过期，请登录！',
        success: (res) => {
          if (res.confirm) {
            uni.navigateTo({
              url: '../../login/login'
            })
            console.log('用户点击确定')
          } else if (res.cancel) {
            uni.switchTab({
							url: '/pages/home/home/index'
            })
            console.log('用户点击取消')
          }
        }
      })
    } else {
      let params = {
        id: uni.getStorageSync('userInfo').id
      }
      this.$api.getUserShopAddress(params).then(res => {
        if (res.success) {
          if (res.rows.balance) {
						if (res.rows.typecode === 2) {
							this.aboutList[0].money = res.rows.balance
						}
          }
          if (res.rows.name) {
            this.shopName = res.rows.name
          }
          this.phone = res.rows.account
        } else {
          uni.showToast({ title: res.msg, icon: 'none' })
        }
      }).catch(err => {
        console.log('request fail', err)
      })
      this.showBox = true
    }
		const typecode = uni.getStorageSync('userInfo').typecode
		if (typecode === 3) {
			this.aboutList = [
			  {
			    icon: '/static/user/money.png',
			    title: '房屋信息',
			    contact: 'House Info'
			  },
				{
				  icon: '/static/user/signOut.png',
				  title: '退出登录',
				  contact: 'sign out'
				},
			]
		} else if (typecode === 5 || typecode === 4) {
			this.aboutList = [
			  {
			    icon: '/static/user/money.png',
			    title: '确认验收信息',
			    contact: 'House Test'
			  },
				{
				  icon: '/static/user/signOut.png',
				  title: '退出登录',
				  contact: 'sign out'
				},
			]
		} else if (typecode === 6) {
			this.aboutList = [
			  {
			    icon: '/static/user/money.png',
			    title: '验收信息',
			    contact: 'House Test'
			  },
				{
				  icon: '/static/user/signOut.png',
				  title: '退出登录',
				  contact: 'sign out'
				},
			]
		} else {
			this.aboutList = [
			  {
			    icon: '/static/user/money.png',
			    title: '账号余额',
			    money: 0,
			    contact: 'Money'
			  },
			  {
			    icon: '/static/user/shopLink.png',
			    title: '店铺网址',
			    contact: 'Shop Adress'
			  },
			  {
			    icon: '/static/user/bulid.png',
			    title: '建材商入驻',
			    contact: 'Build maker'
			  },
			  {
			    icon: '/static/user/topUp.png',
			    title: '链接充值',
			    contact: 'Link recharge'
			  },
			  {
			    icon: '/static/user/list.png',
			    title: '消费列表',
			    contact: 'Spend list'
			  },
				{
				  icon: '/static/user/signOut.png',
				  title: '退出登录',
				  contact: 'sign out'
				},
			]
		}
  },
  methods: {
    popup(item) {
      if (item.title === '店铺网址') {
        uni.navigateTo({
          url: '../shopAdress/shopAdress'
        })
      }
			if (item.title === '房屋信息') {
			  uni.navigateTo({
			  	url: '../houseAcceptance/houseAcceptance'
			  })
			}
			if (item.title === '验收信息') {
			  uni.navigateTo({
			    url: '../houseInfo/houseInfo'
			  })
			}
      if (item.title === '消费列表') {
        uni.navigateTo({
          url: '../spend/spend'
        })
      }
      if (item.title === '确认验收信息') {
        uni.navigateTo({
          url: '../confirmHouseInfo/confirmHouseInfo'
        })
      }
			if (item.title === '退出登录') {
			  uni.showModal({
			    title: '提示',
			    content: '确定退出登录吗？',
			    success: (res) => {
			      if (res.confirm) {
							uni.removeStorageSync('userInfo')
			        uni.switchTab({
			          url: '/pages/home/home/index'
			        })
			        console.log('用户点击确定')
			      } else if (res.cancel) {
			        console.log('用户点击取消')
			      }
			    }
			  })
				return
			}
			
			if (item.title !== '账号余额') {
				uni.showToast({ title: '暂无信息', icon: 'none' })
			}
    },
    // 修改店铺名称
    spend() {
      uni.navigateTo({
        url: '../userInfo/userInfo'
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.user {
  // background: #F6F6F6;
  .top {
		height: 288rpx;
		width: 100%;
		position: relative;
		.ico {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: -1;
		}
    .content {
      display: flex;
      align-items: center;
      height: 288rpx;
      // background: #EF1C1C;
      .left {
        margin: 0 40rpx;
        image {
          width: 154rpx;
          height: 127rpx;
        }
      }
      .right {
        width: 100%;
        .right-top {
          font-size: 44rpx;
          font-weight: 400;
          color: #FFFFFF;
        }
        .right-bottom {
          font-size: 30rpx;
          color: #FFBFBF;
          margin-top: 40rpx;
        }
      }
    }
  }
  .buttom {
    .buttom-list {
      padding: 32rpx;
      .list-list {
        background: #FFFFFF;
        box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.04);
        display: flex;
        padding: 20rpx;
        justify-content: space-between;
        margin-bottom: 40rpx;
        margin-top: 20rpx;
        .list-left {
          display: flex;
          align-items: center;
          .left-img {
            width: 60rpx;
            height: 60rpx;
            margin-right: 20rpx;
            image {
              width: 100%;
              height: 100%;
            }
          }
          .list-center {
            view {
              line-height: 60rpx;
            }
            .center-top {
              .top-title {
                font-size: 34rpx;
                font-weight: 400;
                color: #333333;
                margin-right: 20rpx;
              }
              .top-English {
                color: #999999;
                font-size: 28rpx;
              }
            }
            .center-buttom {
              text {
                font-size: 28rpx;
                font-weight: 400;
                color: #999999;
                margin-right: 40rpx;
              }
            }
          }
        }
        .list-right {
          display: flex;
          align-items: center;
          image {
            width: 32rpx;
            height: 32rpx;
          }
          .money {
            font-size: 40rpx;
            color: #FA6400;
          }
        }
      }
    }
  }
}
</style>
